<template>
    <div>
        <div style="height: 800px; width: 800px;" ref="containerRef">324</div>
        <TeleportContainer />
        <div>
            <el-button @click="test">测试函数</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup name="X6Demo">
import { ref, onMounted, reactive, useTemplateRef } from 'vue';
import ProgressNode from './ProgressNode.vue'
import { Graph, Shape } from '@antv/x6'
import { Snapline } from '@antv/x6-plugin-snapline'
import data from './data';
import { register, getTeleport } from '@antv/x6-vue-shape'
const TeleportContainer = getTeleport()

const containerRef = ref<HTMLDivElement | null>(null)

Shape.HTML.register({
    shape: 'custom-html-node',
    width: 160,
    height: 80,
    effect: ['data'],
    html() {
        const div = document.createElement('div')
        div.className = 'custom-html'
        return div
    },
})
register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: ProgressNode,
    ports: {
        groups: {
            top: {
                position: 'top',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
            bottom: {
                position: 'bottom',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
        },
    },
})

const graph = ref<Graph>();
onMounted(() => {
    graph.value = new Graph({
        container: containerRef.value as any,
        background: {
            color: '#F2F7FA',
        },
        autoResize: true,
    })
    graph.value.use(
        new Snapline({
            enabled: true,
        })
    )
    graph.value.fromJSON(data)
})
function test() {

    // getDownstreamNodePosition()
}
</script>
<style>
.custom-html {
    background-color: #bfa;
    width: 80px;
    height: 80px;
}
</style>